<template>
  <div class="commodity">
    <div class="commodity-title">
      商品中心
    </div>
    <div class="commodity-container">
      <div class="preparation" @click="cargoPre">
        <a-icon class="icon" type="plus" />
        <span class="preparation-text">货柜准备</span>
      </div>
      <a-input-search
        placeholder="搜索物料零件号/物料名称"
        style="width:420px;margin-top:16px;"
        v-model="materialsName"
        @search="onSearch"
      >
        <img slot="prefix" style="width:13px;" src="../../../assets/image/sellerHub/searchicon.png" alt="">
        <a-button slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
      <span :class="isShowSearch?'commodity-menu':'commodity-menu commodity-menu-close'" @click="openMenu"><img :src="isShowSearch?require('../../../assets/image/sellerHub/menu.png'):require('../../../assets/image/sellerHub/menu_close.png')" alt=""></span>
      <a-button style="float:right;margin-top:16px;" slot="enterButton">
          <img style="width:14px;margin-right:7px;position:relative;top:-2px;" src="../../../assets/image/sellerHub/export.png" alt="">
          批量导出
      </a-button>
      <div class="commodity-search-box" v-if="isShowSearch">
        <span class="ant-popover-arrow search-box-arrow"></span>
        <a-form :form="form" >
        <a-form-item label="含税销售价:">
          <div style="width:361px">
            <a-input
              style="width:169px;margin-right:6px;"
              addon-after="元"
              placeholder="最小值"
              v-model="taxPriceMin"
            />−<a-input
              style="width:169px;margin-left:6px;"
              addon-after="元"
              placeholder="最大值"
              v-model="taxPriceMax"
            />
          </div>
        </a-form-item>
        <a-form-item label="协议价:">
          <div style="width:361px">
            <a-input
              style="width:169px;margin-right:6px;"
              addon-after="元"
              placeholder="最小值"
              v-model="agreementPriceMin"
            />−<a-input
              style="width:169px;margin-left:6px;"
              addon-after="元"
              placeholder="最大值"
              v-model="agreementPriceMax"
            />
          </div>
        </a-form-item>
        <a-form-item label="可售库存:">
          <div style="width:361px">
            <a-input
              style="width:169px;margin-right:6px;"
              addon-after="元"
              placeholder="最小值"
              v-model="salePriceMin"
            />−<a-input
              style="width:169px;margin-left:6px;"
              addon-after="元"
              placeholder="最大值"
              v-model="salePriceMax"
            />
          </div>
        </a-form-item>
        <a-form-item label="锁定库存:">
          <div style="width:361px">
            <a-input
              style="width:169px;margin-right:6px;"
              addon-after="元"
              placeholder="最小值"
              v-model="stockMin"
            />−<a-input
              style="width:169px;margin-left:6px;"
              addon-after="元"
              placeholder="最大值"
              v-model="stockMax"
            />
          </div>
        </a-form-item>
        <a-form-item label="库存预警:">
          <a-select
            v-model="stockWarning"
            placeholder="请选择"
          >
            <a-select-option value="1">
              预警中
            </a-select-option>
            <a-select-option value="2">
              未预警
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="库存数量:">
          <div style="width:361px">
            <a-input
              style="width:169px;margin-right:6px;"
              addon-after="元"
              placeholder="最小值"
              v-model="stockNumMin"
            />−<a-input
              style="width:169px;margin-left:6px;"
              addon-after="元"
              placeholder="最大值"
              v-model="stockNumMax"
            />
          </div>
        </a-form-item>
        <!-- <a-form-item style="height:80px;">
          <a-button @click="returnInit" style="position:absolute;bottom:-64px;right:-300px;border:none;box-shadow:none;">
            重置
          </a-button>
          <a-button type="primary" @click="searchBtn"  style="position:absolute;bottom:-64px;right:-361px;">
            查询
          </a-button>
        </a-form-item> -->
      </a-form>
      </div>
      <ul class="nav-list">
        <li v-for="(item, i) in navData" :class="{ 'li-checked' : active === i }" :key="i" @click="checkNavList(i)">{{item.statusName}}<span style="margin-left:8px;">({{item.total}})</span></li>
      </ul>
      <ul class="goods-list">
        <li v-show="isShowNum">已选物料<span>{{checkListNum}}</span>件</li>
        <li>
          <a-popover trigger="click" v-model="isShowPopover">
            <div class="popover-up-title" slot="title">
              <img style="width:16px;margin:-4px 8px 0 0;" src="../../../assets/image/sellerHub/error_tip.png" alt="">确定上架吗？
            </div>
            <div slot="content">
              <div class="popover-bottom-btn">
                <span @click="closeUp">取消</span>
                <span @click="upGoods">确定</span>
              </div>
            </div>
            <div>
              <img src="../../../assets/image/sellerHub/put_on.png" style="width:16px;" alt="">上架
            </div>
          </a-popover>
          </li>
        <li @click="stockChange"><img src="../../../assets/image/sellerHub/stock_changed.png"  style="width:16px;" alt="">库存调整</li>
        <li @click="priceChange"><img src="../../../assets/image/sellerHub/price_edit.png"  style="width:16px;" alt="">价格设置</li>
        <li @click="stockWarningEdit"><img src="../../../assets/image/sellerHub/warning_edit.png"  style="width:16px;" alt="">库存预警设置</li>
        <li>
          <a-popover trigger="click" v-model="isShowPopover2">
            <div class="popover-up-title" slot="title">
              <img style="width:16px;margin:-4px 8px 0 0;" src="../../../assets/image/sellerHub/error_tip.png" alt="">确定移入回收站？
            </div>
            <div slot="content">
              <div class="popover-bottom-btn">
                <span @click="closeUp">取消</span>
                <span @click="moveRecover">确定</span>
              </div>
            </div>
            <div>
              <img src="../../../assets/image/sellerHub/recycle.png" style="width:16px;" alt="">移入回收站
            </div>
          </a-popover>
        </li>
      </ul>
      <a-config-provider :locale="locale">
        <a-table
        :locale="localeTable"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns" :data-source="data"
        :pagination="false" >
          <div slot="name" slot-scope="name,dataList" class="table-name">
            <img :src="dataList.materialImgId" alt="">
            <div class="table-name-right">
              <div class="right-item">
                <a-popover>
                  <template slot="content">
                    <div class="goods-msg">
                      <p>物料信息</p>
                      <p><span>物料名称:</span>{{name || '--'}}</p>
                      <p><span>零件号:</span> {{dataList.materialPartNum || '--'}}</p>
                      <p><span>规格:</span>{{dataList.specifications || '--'}}</p>
                      <p><span>计量单位:</span> {{dataList.unit || '--'}}</p>
                    </div>
                  </template>
                  <span class="textOverflow" style="max-width:88px;">{{name || '--'}}</span>
                </a-popover>
                <em>|</em>
              <i class="textOverflow" style="max-width:88px;">零件号:{{dataList.materialPartNum || '--'}}</i>
              </div>
              <div class="right-item">
                <span class="item-label">规格：</span>
                <span class="textOverflow" style="max-width:46px;">{{dataList.specifications || '--'}}</span>
                <em>|</em>
                <span class="item-label">计量单位：</span>
                <span class="textOverflow" style="max-width:18px;">{{dataList.unit || '--'}}</span>
                </div>
            </div>
          </div>
          <div slot="sellPriceNum" slot-scope="sellPriceNum" class="stock-num">
            {{sellPriceNum}}
            <img style="position:relative;top:-2px;left:8px;" src="../../../assets/image/sellerHub/warning.png" alt="">
          </div>
          <div slot="stockAddress" slot-scope="stockAddress" class="stock-num">
            {{stockAddress}}
            <img style="position:relative;top:-2px;left:8px;" src="../../../assets/image/sellerHub/locking.png" alt="">
          </div>
          <div slot="agreementPrice" slot-scope="agreementPrice" class="stock-num">
            {{agreementPrice}}
            <img style="position:relative;top:-2px;left:8px;" src="../../../assets/image/sellerHub/detailed.png" alt="">
          </div>
          <div slot="status" slot-scope="status" :class="status=='CONTAINER'?'stock-status status-red':status=='SELLING'?'stock-status status-blue':'stock-status status-gray'">
            {{status=='CONTAINER'?'货柜中':status=='SELLING'?'已上架':'回收站'}}
          </div>
          <div slot="edit" slot-scope="edit,dataList" class="stock-edit">
            <p @click="showDrawer(1,dataList)"><img style="margin-right:8px;" src="../../../assets/image/sellerHub/out_goods.png" alt="">出库历史</p>
            <p @click="showDrawer(2,dataList)"><img style="margin-right:8px;" src="../../../assets/image/sellerHub/history_price.png" alt="">价格历史</p>
          </div>
        </a-table>
      </a-config-provider>
      <div style="width:100%;height:100px;"></div>
      <div class="bottom-pagination">
        <pagination
          style="float:right;margin:23px;"
          @pageChange="pageChange"
          :total="total"
          :current="current">
        </pagination>
        <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
      </div>
    </div>
    <Commodity v-model="isShowDrawer" :commodityTitle="commodityTitle" :inventoryList="inventoryList" :drawerData="drawerData"/>
    <ReturnMsg v-model="isShowErrorMsg" :errorMsgList="errorMsgList"/>
    <set-price-modal :visible.sync="setPriceVisible" :materialCode="materialIds" @closeModal="init"></set-price-modal>
    <storage-alarm-modal :visible.sync="storageAlarmVisible" :materialCode="materialIds" @closeModal="init"></storage-alarm-modal>
    <set-storage-modal :visible.sync="setStorageVisible" :materialCode="materialIds" @closeModal="init"></set-storage-modal>
    <cargo-pre-modal :visible.sync="cargoPreVisible" @closeModal="init"></cargo-pre-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import {Popover,Form,Table,ConfigProvider} from 'ant-design-vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import Commodity from './components/commodityHistory'
import ReturnMsg from './components/returnMsg'
import Pagination from '@/components/common/pagination'
import SetPriceModal from './components/setPriceModal'
import StorageAlarmModal from './components/storageAlarmModal'
import SetStorageModal from './components/setStorageModal'
import CargoPreModal from './components/cargoPreModal'
import Empty from './components/emptyImg'
Vue.use(Popover)
Vue.use(Form)
Vue.use(Table)
Vue.use(ConfigProvider)
const columns = [
  {
    title: '物料信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    width: 500,
  },
  {
    title: '可售库存数量',
    dataIndex: 'sellPriceNum',
    defaultSortOrder: 'descend',
    width: 160,
    sorter: (a, b) => a.sellPriceNum - b.sellPriceNum,
    scopedSlots: { customRender: 'sellPriceNum' },
  },
  {
    title: '订货数量',
    dataIndex: 'orderOutInventoryNum',
    defaultSortOrder: 'descend',
    width: 120,
    sorter: (a, b) => a.orderOutInventoryNum - b.orderOutInventoryNum,
  },
  {
    title: '锁定库存',
    dataIndex: 'stockAddress',
    defaultSortOrder: 'descend',
    width: 160,
    sorter: (a, b) => a.stockAddress - b.stockAddress,
    scopedSlots: { customRender: 'stockAddress' },
  },
  {
    title: '库存数量',
    dataIndex: 'stockNum',
    width: 120,
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.stockNum - b.stockNum,
  },
  {
    title: '可售库存预警',
    dataIndex: 'warningNum',
    width: 120,
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.warningNum - b.warningNum,
  },
  {
    title: '含税销售价',
    dataIndex: 'taxNum',
    width: 120,
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.taxNum - b.taxNum,
  },
  {
    title: '协议价',
    dataIndex: 'agreementPrice',
    width: 160,
    scopedSlots: { customRender: 'agreementPrice' },
  },
  {
    title: '状态',
    width: 130,
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'edit',
    scopedSlots: { customRender: 'edit' },
    width: 120,
    fixed: 'right'
  },

];
export default {
  components:{Commodity,ReturnMsg,Pagination,SetPriceModal,StorageAlarmModal,SetStorageModal,CargoPreModal},
  data() {
    return {
      locale: zhCN,
      data:[],
      columns,
      selectedRowKeys: [],
      localeTable:{emptyText:<Empty />},
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      total:0,//总条数
      current:1,//当前页
      isShowDrawer: false,//是否展示抽屉
      commodityTitle:'',//抽屉标题
      isShowSearch: true,//是否展示搜索
      navData: [
        { statusName: '全部' },
        { statusName: '货柜中' },
        { statusName: '已上架' },
        { statusName: '回收站' },
      ],
      active: 0,
      isShowErrorMsg:false,//商品上架反馈
      taxPriceMin:'',
      taxPriceMax:'',
      agreementPriceMin:'',
      agreementPriceMax:'',
      salePriceMin:'',
      salePriceMax:'',
      stockMin:'',
      stockMax:'',
      stockNumMin:'',
      stockNumMax:'',
      stockWarning: "",
      inventoryStatus: '',
      materialsName: '',//物料名称
      drawerData:{},
      materialIds:[],//选中列表id
      errorMsgList:[],//上架失败信息
      errorDataList:[],//错误反馈列表
      inventoryList:{},//点击列表数据
      pageSize: 10,//列表每页展示数量
      pageNo:1,
      setPriceVisible: false,
      storageAlarmVisible: false,
      setStorageVisible: false,
      cargoPreVisible: false,
      ids:[],
      isShowNum:false,//已选物料是否显示
      checkListNum: 0,//选中个数
      isShowPopover: false,
      isShowPopover2: false,
    }
  },
  created() {
    this.init();
  },
  computed: {
    _params() {
      //查询参数
      return {
        taxPriceStart:  this.taxPriceMin,
        taxPriceEnd:  this.taxPriceMax,
        minPrice:  this.agreementPriceMin,
        maxPrice:  this.agreementPriceMax,
        sellInventoryNumStart: this.salePriceMin,
        sellInventoryNumEnd: this.salePriceMax,
        inventoryStart: this.stockMin,
        inventoryEnd: this.stockMax,
        lockInventoryNumStart:  this.stockNumMin,
        lockInventoryNumEnd:  this.stockNumMax,
        warnInventory: this.stockWarning*1,
        inventoryStatus: this.inventoryStatus,
        material: this.materialsName,
        status:this.inventoryStatus,
        pageSize: this.pageSize,
        pageNo:this.pageNo,
        tenantId: this.$store.state.user.currentTenant && this.$store.state.user.currentTenant.id
      }
    }
  },
  watch: {
    selectedRowKeys(_val) {
      let _ids = [];
      let _materialIds = [];
      _val.map(n => {
        if(this.data[n].materialId) {
          _materialIds.push(this.data[n].materialCode);
          _ids.push(this.data[n].id);
        }
      })
      this.materialIds = _materialIds;
      this.ids = _ids;
    },
    _params(newVal) {
      if(newVal.tenantId) {
        this.init();
      }
    }
  },
  methods: {
    init() {
      //查询列表个数
      this.$store.dispatch('request', this.$api.sellerCenter.getMaterialInventoryStatistical(
          this.$store.state.user.currentTenant.id
        )).then(res => {
          let _list = res.result;
          let _allNum = 0;
          _list.map(n => {
            _allNum = _allNum+n.total;
          })
          _list.sort((a,b) => {
            return a.status-b.status;
          })
          this.navData = [{status: -1,statusName: "全部",total: _allNum},..._list]
        }).catch(() => {
          this.$message.error('')
        })
      //分页列表
      this.$store.dispatch('request', this.$api.sellerCenter.inventoryPage(
          this._params
        )).then(res => {
          console.log(res,'res')
          this.total = res.result.total;
          let _res = res.result.records;
          let _data = [];
          _res.map((n,i) => {
            _data.push({
              key: i,
              name: n.materialName,
              sellPriceNum: n.sellInventoryNum || 0,
              stockAddress: n.lockInventoryNum || 0,
              stockNum: n.inventoryNum || 0,
              warningNum: n.warningInventoryNum || 0,
              taxNum: n.taxPrice || 0,
              agreementPrice: `${n.minPrice || 0}-${n.maxPrice || 0}`,
              status: n.status,
              materialCode: n.materialCode,
              specifications: n.specifications,
              unit:n.unit,
              materialImgId: n.materialImgId || '',
              id: n.id,
              materialId: n.materialId,
              inventoryNum: n.inventoryNum,
              orderOutInventoryNum: n.orderOutInventoryNum || 0,
            });
          })
          this.data = _data;
        }).catch(() => {
          this.$message.error('')
        })
    },
    pageChange(_page) {
      //改变页码
      this.current = _page;
      this.pageNo = _page;
      this.init();
    },
    checkNavList(i) {
      //选择库存状态
      this.active = i;
      this.inventoryStatus = i==0?"":i==1?0:i==2?1:2;
      this.init();
    },
    onSelectChange(selectedRowKeys) {
      //table列表选中选项
      selectedRowKeys.length != 0?this.isShowNum = true:this.isShowNum = false;
      this.checkListNum = selectedRowKeys.length;
      this.selectedRowKeys = selectedRowKeys;
    },
    showDrawer(_type,_dataList) {
      //抽屉---历史
      this.inventoryList = _dataList;
      let _url = this.$api.sellerCenter.getViewOutHistory;
      _type == 2?_url = this.$api.sellerCenter.getViewPriceHistory:'';
      this.$store.dispatch('request', _url(
        _dataList.id
      )).then(res => {
        this.drawerData = res.result;
      }).catch(() => {
        // this.$message.error('')
      })
      this.isShowDrawer = true;
      this.commodityTitle = _type *1;
    },
    openMenu() {
      //打开搜索页
      this.isShowSearch = !this.isShowSearch;
    },
    onSearch() {
      this.init();
    },
    // searchBtn() {
    //   //查询提交
    //   this.init();
    //   console.log(this._params)
    // },
    // returnInit() {
    //   //重置
    //   this.taxPriceMin = "",
    //   this.taxPriceMax = "",
    //   this.agreementPriceMin = "",
    //   this.agreementPriceMax = "",
    //   this.salePriceMin = "",
    //   this.salePriceMax = "",
    //   this.stockMin = "",
    //   this.stockMax = "",
    //   this.stockNumMin = "",
    //   this.stockNumMax = "",
    //   this.stockWarning = ""
    // },
    closeUp() {
      this.isShowPopover = false;
      this.isShowPopover2 = false;
    },
    upGoods() {
      if(!this.ids.length) {
        this.$message.warning("请选择物料！");
        this.isShowPopover = false;
        return;
      }
      //上架
      this.isShowPopover = false;
      this.$store.dispatch('request', this.$api.sellerCenter.toSelling(
        this.ids
      )).then(res => {
        if(res.code != 1) {
          this.isShowErrorMsg = true;
          this.errorMsgList = res.result;
        }else {
          this.$message.success("上架成功");
        }
        // this.errorDataList = res;
      }).catch((res) => {

      })
    },
    stockChange() {
      //库存调整
      console.log(this.materialIds,'materialIds')
      this.setStorageVisible = true;
    },
    priceChange() {
      //价格设置
      console.log(this.materialIds,'materialIds')
      this.setPriceVisible = true;
    },
    stockWarningEdit() {
      //库存预警设置
      console.log(this.materialIds,'materialIds')
      this.storageAlarmVisible = true;
    },
    cargoPre() {
      //货柜准备
      this.cargoPreVisible = true;
    },
    moveRecover() {
      if(!this.ids.length) {
        this.$message.warning("请选择物料！");
        this.isShowPopover2 = false;
        return;
      }
      //移入回收站
      this.isShowPopover2 = false;
      this.$store.dispatch('request', this.$api.sellerCenter.toTrash(
        this.ids
      )).then(res => {
        if(res.code == 1) {
          this.$message.success("成功移入回收站");
          this.init();
        }else {
          this.isShowErrorMsg = true;
        }
        // this.errorMsgList = res.result;
        // this.errorDataList = res;
      }).catch((res) => {

      })
    },
  },
}
</script>
<style lang="less">
ul,li,i,em{
  list-style: none;
  margin: 0;
  padding: 0;
  font-style:normal;
}
.textOverflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:inline-block;
  vertical-align: middle;
}
  .commodity {
    .commodity-title {
      width: 100%;
      height: 54px;
      line-height: 54px;
      padding-left: 24px;
      font-size: 16px;
      font-weight: 600;
      background: #fff;
    }
    .commodity-container {
      background: #fff;
      margin: 16px;
      width: calc(100% - 32px);
      min-height: 800px;
      padding: 24px;
      overflow: hidden;
    }
    .preparation {
      width: 96px;
      height: 32px;
      line-height: 32px;
      background: @activeRed;
      border-radius: 2px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      .icon{
        width: 16px;
        height: 16px;
      }
      .preparation-text{
        font-size: 12px;
      }
    }
    .commodity-menu {
      width: 32px;
      height: 32px;
      display: inline-block;
      background: rgba(215,55,55,0.08);
      margin-top: 16px;
      vertical-align: middle;
      position: relative;
      cursor: pointer;
      margin-left: 8px;
      border-radius: 2px;
      img {
        position: absolute;
        top: 8px;
        left: 8px;
      }
    }
    .commodity-menu-close {
      background: #f9f9f9;
    }
    .commodity-search-box {
      width: 100%;
      background: #ffffff;
      border-radius: 2px 0px 3px 0px 2px 2px 2px;
      box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.08);
      margin-top: 16px;
      position: relative;
      padding: 17px 9px 0;
      overflow: hidden;
    }
    .search-box-arrow {
      position: absolute;
      border-color: transparent #fff #fff transparent;
      box-shadow: -2px -2px 5px  rgba(0, 0, 0, 7%);
      left: 437px;
      background: #fff;
      width: 16px;
      height: 16px;
      top: -8px;
    }
    .ant-form-item {
      width: 361px;
      float: left;
      margin-left: 15px;
      .ant-form-item-label {
        line-height: 28px;
      }
    }
    .nav-list {
      width: 100%;
      border: 1px solid rgba(39,36,36,0.06);
      border-radius: 3px;
      height: 54px;
      line-height: 52px;
      margin-top: 16px;
      li {
        float: left;
        width: 107px;
        text-align: center;
        cursor: pointer;
        background: #f9f9f9;
        border-right: 1px solid #eeeeee;
      }
      li:hover {
        color: @activeRed;
        border-bottom: 1px solid #fff;
      }
      .li-checked {
        color: @activeRed;
        background: #fff;
        border-bottom: 1px solid #fff;
      }
    }
    .goods-list {
      margin-bottom: 16px;
      overflow: hidden;
      li {
        cursor: pointer;
        float: left;
        padding: 0 12px;
        border: 1px solid rgba(39,36,36,0.08);
        border-radius: 3px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        margin-right: 8px;
        margin-top: 16px;
        img {
          margin-right: 8px;
        }
      }
      li:nth-of-type(1) {
        border: none;
        span {
          color: @activeRed;
        }
      }
      li:hover {
        color: @activeRed;
      }
      li:nth-of-type(1):hover {
        color: #272424;
        border: none;
        span {
          color: @activeRed;
        }
      }
    }
    .table-name {
      img {
        display: block;
        width: 60px;
        height: 60px;
        float: left;
        border: 1px solid rgba(34,49,77,0.08);
      }
      .table-name-right {
        float: left;
        margin-left: 12px;
        padding-top: 3px;
        color: rgba(39,36,36,1);
        .right-item {
          display: block;
          height: 28px;
          line-height: 28px;
          i {
            height: 20px;
            display: inline-block;
            line-height: 20px;
          }
          em {
            color: #f2f2f2;
            margin: 0 8px;
            position: relative;
            top: -1px;
          }
          .item-label {
            color: rgba(39,36,36,0.6);
          }
        }
      }
    }
    .stock-status {
      width: 52px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      font-size: 12px;
      border-radius: 2px;
    }
    .status-blue {
      color: #1876FF;
      background: rgba(24,118,255,0.05);
    }
    .status-red {
      color: @activeRed;
      background: rgba(215,55,55,0.05);
    }
    .status-gray {
      color: #272424;;
      background: rgba(51,67,98,0.05);
    }
    .stock-edit>p {
      margin-bottom: 5px;
      cursor: pointer;
    }
  }
  .goods-msg {
    font-size: 12px;
    color: #272424;
    padding: 4px 0;
    p {
      margin-bottom: 4px;
    }
    p:nth-of-type(1) {
      font-weight: 600;
      border-left: 2px solid @activeRed;
      padding-left: 4px;
      height: 10px;
      line-height: 10px;
    }
    p>span {
      width: 60px;
      opacity: 0.6;
      display: inline-block;
    }
    p:last-child {
      margin: 0;
    }
  }
  .bottom-pagination>.paginationBefore {
    float: right;
    line-height: 70px;
    i {
      color: @activeRed;
    }
  }
.bottom-pagination {
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39,36,36,0.02);
  padding-right: 30px;
  z-index: 3;
}
.popover-up-title {
  text-align: center;
  padding: 11px 0 12px;
}
.popover-bottom-btn {
  text-align: center;
  span {
    height: 24px;
    line-height: 24px;
    display: inline-block;
    margin: 0 8px;
    border: 1px solid rgba(39,36,36,0.08);
    cursor: pointer;
    padding: 0 8px;
    font-size: 12px;
  }
  span:last-child {
    border: 1px solid @activeRed;
    background: @activeRed;
    color: #fff;
  }
}
</style>
